<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-component.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>
    <link href="/static/css/common_biz.css" rel="stylesheet"/>

    <title>顶点索引</title>
    <style>
    </style>
</head>
<body class="skin-default">
<div id="app" class="qy-view-page-app">
    <div id="threeBox"
         style="background-color: #cccccc;height: 100%;box-sizing: border-box;overflow: hidden;padding: 100px;">

    </div>
</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--layer-->
<!--<script src="/static/plugin/layer/layer.js"></script>-->
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<script src="/static/plugin/element-ui/locale/zh-cn.js"></script>
<!--three.js-->
<script src="/static/plugin/threejs/three.min.js"></script>
<script src="/static/plugin/threejs/controls/OrbitControls.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script src="/static/plugin/jo/jo-page-element-plus.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<script src="/static/js/common_biz.js"></script>
<script type="text/javascript">
    // 代码生成按钮事件定义
    window.TEMP_BTN_FUNCTION = {
        methods: {
            // 自定义按钮栏事件 start
            // 自定义按钮栏事件 end

            // 自定义表格行按钮事件 start
            // 自定义表格行按钮事件 end
        }
    };
</script>
<script type="text/javascript">
    // vue参数, 留着给全局js定制用, 如果有需要定制vue参数, 则覆盖TEMP_VUE_PARAM
    window.TEMP_VUE_PARAM = {};

</script>
<script type="text/javascript">
    // vue应用构造
    const app = Vue.createApp(joEl.buildVueAppParam(window.TEMP_VUE_PARAM || {}, {
        data: function () {
            return {
                // 渲染器
                renderer: null
            }
        }
        , computed: {}
        , methods: {}
        , mounted() {
            // 创建场景对象
            var scene = new THREE.Scene();
            // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
            var axisHelper = new THREE.AxesHelper(250);
            scene.add(axisHelper);

            /*
             * 网格模型设置
             */
            // 几何体
            var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
            //类型数组创建顶点数据
            var vertices = new Float32Array([
                0, 0, 0, //顶点1坐标
                80, 0, 0, //顶点2坐标
                80, 80, 0, //顶点3坐标
                0, 80, 0, //顶点4坐标
            ]);
            // 创建属性缓冲区对象
            var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
            // 设置几何体attributes属性的位置属性
            geometry.attributes.position = attribue;

            // 顶点法向量, 影响光照计算, 几何体更有棱角感
            var normals = new Float32Array([
                0, 0, 1, //顶点1法向量
                0, 0, 1, //顶点2法向量
                0, 0, 1, //顶点3法向量
                0, 0, 1, //顶点4法向量
            ]);
            geometry.attributes.normal = new THREE.BufferAttribute(normals, 3);

            // Uint16Array类型数组创建顶点索引数据
            var indexes = new Uint16Array([
                // 0对应第1个顶点位置数据、第1个顶点法向量数据
                // 1对应第2个顶点位置数据、第2个顶点法向量数据
                // 索引值3个为一组，表示一个三角形的3个顶点
                0, 1, 2,
                0, 2, 3,
            ])
            // 索引数据赋值给几何体的index属性
            geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组

            // 材质对象 基础材质
            var material2 = new THREE.MeshBasicMaterial({
                color: 0x79BBFF,
                // vertexColors: THREE.VertexColors,//以顶点颜色为准
                side: THREE.DoubleSide
            });
            // 网格模型对象Mesh
            var mesh = new THREE.Mesh(geometry, material2);
            scene.add(mesh); // 网格模型添加到场景中


            // 点模型材质
            var material = new THREE.PointsMaterial({
                // color: 0xC45656,
                vertexColors: THREE.VertexColors,//以顶点颜色为准
                size: 10.0 //点对象像素尺寸
            });
            //点模型对象
            var points = new THREE.Points(geometry, material);
            scene.add(points);


            // 模型位置
            mesh.position.set(0, 0, 0);


            /*
             * 光源设置
             */
            // 环境光
            var ambient = new THREE.AmbientLight(0x444444);
            scene.add(ambient); // 环境光添加到场景中
            // 点光源
            var point = new THREE.PointLight(0xffffff);
            point.position.set(10, 10, 10); // 点光源位置
            scene.add(point); // 点光源添加到场景中
            // 点光源2  位置和point关于原点对称
            // var point2 = new THREE.PointLight(0xffffff);
            // point2.position.set(-400, -200, -300); //点光源位置
            // scene.add(point2); //点光源添加到场景中
            // 太阳光源
            // var sun = new THREE.DirectionalLight(0xffffff);
            // sun.position.set(400, 200, 300);
            // scene.add(sun);
            // 聚光灯
            // var spot = new THREE.SpotLight(0xffffff);
            // spot.position.set(400, 200, 300);
            // scene.add(spot);


            /*
             * 相机设置
             */
            var width = $('#threeBox').width(); // 窗口宽度
            var height = $('#threeBox').height(); // 窗口高度
            var k = width / height; // 窗口宽高比
            var s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
            // 创建相机对象
            var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
            camera.position.set(200, 300, 200); // 设置相机位置
            camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)

            /*
             * 创建渲染器对象
             */
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(width, height); // 设置渲染区域尺寸
            renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
            document.getElementById('threeBox').appendChild(renderer.domElement); // 容器元素中插入canvas对象
            // 执行渲染操作, 指定场景、相机作为参数
            // renderer.render(scene, camera);

            // 普通渲染函数
            var render = () => {
                renderer.render(scene, camera);
            }
            // render();

            var t1 = new Date().getTime();
            // 渲染函数, 匀速渲染
            var renderFunc = () => {
                var t2 = new Date().getTime();
                var t = t2 - t1;//时间差
                t1 = t2;

                // 请求再次执行渲染函数render, 具体渲染时机由浏览器控制, 大致60fps
                window.requestAnimationFrame(renderFunc);

                renderer.render(scene, camera); // 执行渲染操作
                mesh.rotateY(0.001 * t); // 旋转角速度0.001弧度每毫秒, 也就是1S半圈(180度)

            };
            // renderFunc();
            // window.setInterval(render, 20); // 可以实现动画, 但是不能更好利用浏览器资源

            // 鼠标操控渲染
            var renderControl = () => {
                renderer.render(scene, camera);
                // 控件对象
                var controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象
                controls.addEventListener('change', () => {
                    renderer.render(scene, camera);
                });//监听鼠标、键盘事件
            }
            // renderControl();

            // 鼠标操控, requestAnimationFrame自动渲染
            var renderControlAuto = () => {
                renderer.render(scene, camera);
                // 浏览器自动渲染
                window.requestAnimationFrame(renderControlAuto);
            }
            // 控件对象
            var controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象
            renderControlAuto();


            // 保存渲染器
            this.renderer = renderer;

        }
    }, window.TEMP_BTN_FUNCTION || {}, joEl.VUE_COMMON_VIEW, joEl.VUE_COMMON));
    app.use(ElementPlus, {locale: ElementPlusLocaleZhCn});
    app.use(joEl);

    var appVM = app.mount("#app");
</script>

</body>
</html>
